<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <script src="./JQurey.js"></script>
    <script src="./date.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            float: left;
            border: 1px solid #999;
        }
        h4 {
            margin-top: 10px;
        }

        h3 {
            margin-top: 10px;
            margin-bottom: 20px;
        }
        h5 {
            margin-top: 10px;
        }
        .h5-4 {
            margin-bottom: 20px;
        }
        .box1 {
            margin-left: 20px;
            float: left;
        }
        .small {
            width: 50px;
            height: 20px;
        }
        .btn1 {
            width: 100px;
            height: 30px;
            color: red;
            border: 1px solid red;
            background-color: white;
        }
        .btn2 {
            width: 100px;
            height: 30px;
            color: white;
            border: none;
            background-color: red;
        }
        .sp1 {
            color: red;
        }
        .sp2 {
            color: blue;
        }
        .box {
            position: absolute;
            top: 270px;
            left: 390px;
        }
    </style>
</head>
<body>
        <div class="content"></div>
        <div class="box">
            <button class="btn1">加入购物车</button>
            <button class="btn2">立即购买</button>
        </div>
        <a href="./03-购物车.html"></a>
</body>
</html>
    <script>
        // 当前商品id
        var goodsId = '';
        // 当前商品名称
        var goodsName = '';
        // 获取url中的id，进而用来展示商品
        window.onload = function(){
            goodsId = location.search.substr(4);
            // console.log(goodsId);
            getGoods();
        }
        // 根据id查找商品
        function getGoods(){
            $.each(list,function(i,item){
                // id相同  就是当前商品
                if(goodsId == item.id){
                    // 根据id显示页面内容
                    renderById(item);
                    goodsName = item.name;
                }
            })
        }
        function renderById(data){
            console.log(data);
        var str = "";
        str  = `<img src=http:${data.image}>
        <div class="box1">
        <h3>${data.name}</h3>
        <h6>锋利稳定，经久耐用，硬质合金刀头，加大U型排屑槽，提升排屑效率，增强开孔速度。</h6>
        <h4>土猫价： <span class="sp1">¥${data.price}</span></h4>
        <h5 class="h5-1">品牌： <span class="sp2">${data.brandName}</span></h5>
        <h5 class="h5-2">配送： 从 杭州市 到  河南省  快递:  7.00元 （满99元免运费）</h5>
        <h5 class="h5-3">型号：W124404N</h5>
        <h5  class="h5-4">库存：${data.stock}件</h5>
        
        
        <h5>支付方式： 网上支付</h5>
        </div>
        `
        $(".content").html(str);
        }
        $(".btn1").click(function(){
             // 保证类型是数组，可以是空数组但不能是null
            var cartList = JSON.parse(localStorage.getItem('cartList')) || [];
            cartList.push(goodsId);
            // 正常情况下，当id重复时应使数量加一，而不是重复记录id。这个市后台的工作
            localStorage.setItem('cartList', JSON.stringify(cartList));
            alert(goodsName+'添加成功!');
        })
        $(".btn2").click(function(){
            location.href = './03-购物车.html';
        })
    </script>